<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      订房记录
    </div>
    <div style="margin-left: 400PX">
      <el-input v-model="roomNumber" placeholder="房间号"
                style="width: 200px;margin-left: 40px" clearable/>
      <el-input v-model="customerName" placeholder="顾客名称"
                style="width: 200px;margin-left: 40px" clearable/>
      <el-input v-model="identificationCard" placeholder="身份证号"
                style="width: 200px;margin-left: 40px" clearable/>
      <el-button type="primary" @click="selectAll"
                 style="margin-left: 40px">查询
      </el-button>
      <el-button style="margin-left: 40px" @click="check">重置</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-table :data="selectList" height="659px" border style="width: 100%">
        <el-table-column align="center" fixed prop="reserveId" sortable label="订单ID"/>
        <el-table-column align="center" fixed prop="customerId" sortable label="顾客ID"/>
        <el-table-column align="center" fixed prop="customerName" sortable label="顾客名称"/>
        <el-table-column align="center" fixed prop="identificationCard" sortable label="身份证号"/>
        <el-table-column align="center" fixed prop="roomId" sortable label="房间ID"/>
        <el-table-column align="center" fixed prop="roomNumber" sortable label="房间号"/>
        <el-table-column align="center" fixed prop="dataUpdateTime" sortable label="订房时间"/>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { queryAll } from '@/api/reserveRecords'

export default {
  name: 'reserveRecords',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  // 页面参数
  data() {
    return {
      roomNumber: '',
      customerName: '',
      identificationCard: '',
      selectList: [],
    }
  },
  // 页面初始化加载方法
  mounted() {
    this.selectAll()
  },
  // 页面内事件和方法
  methods: {
    selectAll() {
      queryAll({
        roomNumber: this.roomNumber,
        customerName: this.customerName,
        identificationCard: this.identificationCard
      }).then(
        response => {
          this.selectList = response.data
        }
      )
    },
    check() {
      this.roomNumber = ''
      this.customerName = ''
      this.identificationCard = ''
      this.selectAll()
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
